<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	  layout:decorator="manage/common/layout">
<head>
<title>文章列表</title>
<script th:src="@{~/managed/layer/layer.js}" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" th:href="@{~/managed/layer/skin/default/layer.css}" />
<link th:href="@{~/managed/bootstraptable/css/bootstrap-table.min.css}" rel="stylesheet" />
<script th:src="@{~/managed/bootstraptable/js/bootstrap-table.min.js}"></script>
<script th:src="@{~/managed/bootstraptable/js/bootstrap-table-zh-CN.min.js}"></script>
</head>
<body>
	<div class="main-content" layout:fragment="content">
		<div class="main-content-inner">
			<div class="breadcrumbs ace-save-state" id="breadcrumbs">
				<ul class="breadcrumb">
					<li><i class="ace-icon fa fa-home home-icon"></i> <a
						th:href="@{/manage/home}">主页</a></li>
					<li class="active">文章列表</li>
				</ul>
			</div>
			<div class="page-content">
				<div class="row">
					<div class="col-xs-12">
						<table id="manager-table"></table>
					</div>
				</div>
			</div>
		</div>
		<div id="modal-Edit" class="modal fade" tabindex="-1"></div>
		<script th:inline="javascript">
		var operateFormatter = function (value, row, index) {//赋予的参数
			var id = row.articleId;
			return [
				  '<a href="javascript:void(0);" onclick="editRecord('+id+')"  class="btn btn-info btn-sm rightSize detailBtn" ><i class="fa fa-pencil-square-o"></i> 编辑</a>&nbsp;'
		          
		      ].join('');
		  }
		 	   
		    var statusFormatter = function (value, row, index) {//赋予的参数
		        var statusLink = "";
		        if(value == 0){
		           statusLink =  '<span class="label label-xlg label-danger">未激活</span>';
		        }else{
		           statusLink =  '<span class="label label-xlg label-success">激活</span>';
		        }
		        return statusLink;
		    }
		      $('#manager-table').bootstrapTable({
		          url: /*<![CDATA[*/"/manage/article/articleList"/*]]>*/, 
		          method: "post",                     //使用post请求到服务器获取数据
		          uniqueId: "articleId",           //每一行的唯一标识，一般为主键列
		          cache: false,                       // 不缓存
		          contentType : "application/x-www-form-urlencoded;charset=UTF-8",
		          striped: true,                      // 隔行加亮
		          queryParamsType: "limit",
		          sidePagination: "server",           
		          sortable: true,                     //是否启用排序;意味着整个表格都会排序
		          sortName: 'article_id',                    // 设置默认排序为 name
		          sortOrder: "desc",                   //排序方式
		          pagination: true,                   //是否显示分页（*）
		          search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
		          strictSearch: false,
		          showColumns: false,                  //是否显示所有的列
		          showRefresh: true,                  //是否显示刷新按钮
		          clickToSelect: true,                //是否启用点击选中行
		          pageNumber: 1,                   //初始化加载第一页，默认第一页
		          pageSize: 10,                    //每页的记录行数（*）
		          pageList: [5, 10, 15, 20],     //可供选择的每页的行数（*）
		          paginationPreText: "上一页",
		          paginationNextText: "下一页",
		          paginationFirstText: "首页",
		          paginationLastText: "尾页",        
		          columns:[{ 
		                      field: 'articleId',
		                      title: '文章编号',
		                      align: 'center',
		                      visible : false
		                  }, {
		                      field: 'articleTitle',
		                      title: '文章标题',
		                      align: 'center',
		                  }, {
		                      field: 'cate.cateName',
		                      title: '文章分类',
		                      align: 'center',
		                  }, {
		                      field: 'articleViewCount',
		                      title: '文章浏览数',
		                      align: 'center',
		                  }, {
		                      field: 'member.memberName',
		                      title: '文章作者',
		                      align: 'center',
		                  }, {
		                      field: 'articleStatus',
		                      title: '文章状态',
		                      align: 'center',
		                      formatter: statusFormatter
		                  }, {
		                      field: 'operate',
		                      title: '操作',
		                      align: 'center',
		                      valign: 'middle',
		                      width : '15%',
		                      formatter: operateFormatter //自定义方法，添加操作按钮
		                  }]
		          
		      });			    
		      
		      function editRecord(rowId) {
					$("#modal-Edit").modal({remote: /*<![CDATA[*/"/manage/article/articleEdit?articleId="+rowId/*]]>*/});
					$('#modal-Edit').modal('show');				
			  }	
					
		</script>
	</div>
</body>
</html>